<template>
    <div>
        <el-button @click="handler">vmodel父子组件数据同步</el-button>
        <div>{{modelValue}};</div>
        <div>MC {{MC}}</div>
        <ChildC v-model:xxx="MC" v-model:filesArray2="filesArray.filesA"></ChildC>
    </div>
</template>

<script  setup>

    import {ref, reactive, defineProps, defineComponent, defineEmits, defineExpose, watch,onMounted} from 'vue'
    // const obj = defineProps(['count',"str",'people',"hobby"]) // 父传子
    // obj 是一个大的对象
    const obj = defineProps({
        filesArray:Object,
        count: Number,
        str: {type:String,default:"123456"},
        people: Object,
        hobby: Array,
        modelValue: Number,
    })
    const emits = defineEmits(["func","func2","update:modelValue"])// 子触发父的方法并携带参数  最好不要写跟原生事件重名的 比如click
    let MC= ref(0)
    onMounted(()=>{
        MC.value = obj.modelValue
        console.log("MC.",MC.value)
        console.log("filesArray",obj.filesArray)
    })
    const chufa = ()=>{
        // console.log(obj.str)
        emits('func',123456)
        emits('func2',1234567)
    }
    const handler = ()=>{
        emits("update:modelValue",obj.modelValue+100)
    }
    const x = reactive({a:'a'})
    const x2 = ref(20)
  /*  watch(obj, (newValue, oldValue) => {
        console.log("modelValue新的值:", newValue);
        console.log("modelValue旧的值:", oldValue);
    });*/
    /*监听props 传过来的值的变化*/
    watch(() => obj.modelValue, (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
    });
    watch(MC, (newValue, oldValue) => {
        emits("update:modelValue",MC.value)

        console.log(newValue,oldValue);
    });

      watch(obj.filesArray, (newValue, oldValue) => {
       console.log("filesArray新的值:", newValue);
       console.log("filesArray旧的值:", oldValue);
   });
</script>

<style scoped>

</style>